<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VueElementNode</title>
    <style>
      .title {
        height: 3.6rem;
        background-color: #fff;
        box-sizing: border-box;
        border-bottom: 1px solid #eaecef;
      }
      ul {
        list-style: none;
        margin: 0;
      }
      .sidebar-links {
        padding: 1.5rem 0;
      }
      a {
        text-decoration: none;
        font-size: 1em;
        font-weight: 400;
        display: inline-block;
        color: #2c3e50;
        padding: 0.35rem 1rem 0.35rem 1.25rem;
        line-height: 1.4;
        box-sizing: border-box;
      }
      .sidebar-heading {
        color: #2c3e50;
        font-size: 1.1em;
        font-weight: 700;
        padding: 0.35rem 1.5rem 0.35rem 1.25rem;
        box-sizing: border-box;
      }
      .sidebar-lis{
        margin-bottom: 2em;
      }
    </style>
  </head>
  <body>
    <header>
      <h2 class="title">「小慕读书」管理后台</h2>
    </header>
    <aside>
      <ul class="sidebar-links">
        <li class="sidebar-lis">
          <section class="sidebar-heading">Vue进阶（上）</section>
          <ul>
            <li><a href="./demo/ch3-1.html">$emit 和 $on</a></li>
            <li><a href="./demo/ch3-2.html">directive 用法</a></li>
            <li><a href="./demo/ch3-3.html">Vue.component 用法</a></li>
            <li><a href="./demo/ch3-4.html">Vue.extend 用法</a></li>
            <li><a href="./demo/ch3-5.html">Vue.extend 用法2</a></li>
            <li><a href="./demo/ch3-6.html">Vue.use 用法</a></li>
          </ul>
        </li>

        <li class="sidebar-lis">
          <section class="sidebar-heading">Vue进阶（下）</section>
          <ul>
            <li><a href="./demo/ch4-1.html">组件通信 provide 和 inject</a></li>
            <li><a href="./demo/ch4-2.html">过滤器 filter</a></li>
            <li><a href="./demo/ch4-3.html">监听器 watch</a></li>
            <li><a href="./demo/ch4-4.html">class 和 style 绑定的高级用法</a></li>
            <li><a href="./demo/ch4-5.html">Vue.observable</a></li>
            <li><a href="./demo/ch4-6.html">插槽 slot</a></li>
          </ul>
        </li>

        <li class="sidebar-lis">
          <section class="sidebar-heading">Vuex 和 Vue-router 进阶</section>
          <ul>
            <li><a href="./demo/ch6-1.html">vuex 原理解析</a></li>
        </li>
      </ul>
    </aside>
  </body>
</html>
